<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>电脑维护申请</title>
    <script src="/assets/js/config.js"></script>
    <link rel="stylesheet" type="text/css" href="css/apply.css"/>
</head>
<body>
<form id="fm">
    <button onclick="printPage()" style="float: right;" id="button">打印</button>
    <div>
        <div>
            <h2 align=" center" id="title">电脑维护申请</h2>
            <p>申请日期： <span id="crtDate"></span></p>
        </div>
    </div>
    <table border="1" style="border-collapse: collapse;width: 100%">
        <tr>
            <td>申请人姓名</td>
            <td><input class="layui-input" v-model="form.userName" readonly></td>
            <td>部门</td>
            <td><input class="layui-input" v-model="form.department" readonly></td>
        </tr>
        <tr>
            <td>电脑编号</td>
            <td>
                <el-select v-model="form.computerNum">
                    <el-option v-for="(item,i) in computerList" :key="i" :value="item.编号" :label="item.编号"></el-option>
                </el-select>
                <input class="layui-input" v-model="form.computerNum">
                <!--<input class="easyui-datebox" editable="false" name="leaveDate" id="startDate">-->
            </td>

        </tr>
        <tr>
            <td>维护内容</td>
            <td colspan="5"><input class="layui-textarea" name="reason"></td>
        </tr>

    </table>
    <br>
</form>
</body>
<script type="text/javascript" src="js/design.js"></script>
<script type="text/javascript" src="js/multiSelect.js"></script>
<script src="../../../assets/js/vue.min.js"></script>
<script>
    function submitForm() {
        doSubmitForm();
    }

    var that;
    new Vue({
        el: '#fm',
        data: function () {
            return {
                templateId: '14',
                instanceId: '',
                checkedCount: 0,
                form: {
                    userName: '',
                    department: '',
                    computerNum: ''
                },
                computerList:[],
            }
        },
        mounted: function () {
            that = this;
            that.getFlowApproveUserList();
            that.getComputerList();
            window.doSubmitForm = this.submitForm
            var instanceId = getUrlParam();
            this.instanceId = instanceId;
            if (instanceId) {
                //审批进入
                drawApprove(instanceId);
                $("input").prop('readonly', true);
                $("#app").hide();
                $(".layui-layer-btn").hide();
                //查询流程详情
                $.post('/office/flowStepInstance/queryDetail', {id: instanceId}, function (res) {
                    if (res.code == 200) {
                        that.form = res.obj;
                        $("#crtDate").text(formatDate(new Date(res.obj.crtDate)));
                        $("[name='reason']").val(res.obj.reason);
                    }
                });
            } else {
                //新建流程
                drawAdd();
                var html = ' <button onclick="addExecute()">添加执行人</button>';
                $(html).appendTo("#designButtonList");
                var today = formatDate(new Date())
                $("#crtDate").text(today);
                this.form.userName = getUserName()
                this.form.department = getOrgName();
            }

        },
        methods: {
            getFlowApproveUserList() {
                $.get('/office/user/getUserMainOrg', {account: getAccount()}, function (res) {
                    var orgId = res.obj.orgId;
                    var param1 = {templateId: '1554636609883901953', dynamicOrgId: orgId, authRoleId: 35};
                    $.get('/office/flowWorkTemplate/getFlowApproveUserList', param1, function (res) {
                       let a= res.obj.map(item=>{
                            return{orgId:item}
                        })
                        a[a.length - 1].makeFlag=2
                        drawFlowStep(a);
                    })
                })

            },
            getComputerList(){
                $.get('/office/api/computer',function (res) {
                    that.computerList=res.obj.cpList;
                })
            },

            submitForm() {
                var flag = true;
                Object.keys(this.form).forEach(item => {
                    var value = this.form[item];
                    if (!value) {
                        flag = false
                    }
                });
                if (!flag) {
                    showAlert("请补全表单详情后提交哦");
                    return false;
                }

                layer.confirm('确认提交', function (index) {
                    var params = {};
                    params.userId = localStorage.getItem("userId");
                    params.userName = getUserName();
                    params.department = getOrgName();
                    params.title = $("#title").text();
                    params.content = 'apply/computer';
                    params.templateId = that.templateId
                    params.businessStr = JSON.stringify(that.form);
                    params.reason = $("[name='reason']").val();
                    doSubmit('/office/flowWork/addBusinessFlow', params)
                })
            },
        },

    })

    function printPage() {
        window.print();
    }

    var beforePrint = function () {
        $("#button").hide();
        $("#notice").hide();

    };

    var afterPrint = function () {
        $("#button").show();
        $("#notice").show();
    };

    if (window.matchMedia) {   //返回一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function (mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }

    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;
</script>

</html>
